<template>
  <div class="form-branch-container">
    <p
      v-if="props.title"
      class="form-card-title"
    >
      {{ props.title }}
    </p>
    <div
      v-for="(item, index) in props.list"
      :key="index"
      :class="{
        'item-selected': (props.selectedContent && item.content === props.selectedContent) || (!props.selectedContent && disabled && item.content === selectedItem),
        'item-disabled': (props.selectedContent && item.content !== props.selectedContent) || (!props.selectedContent && disabled && item.content !== selectedItem),
        'ivr-form-branch-item': true
      }"
      @click="listItemClick(item)"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script lang="ts">
import vue from '../../../../../../../adapter-vue';
const { ref } = vue;

interface branchItem {
  content: string;
  desc: string;
}

interface Props {
  title: string;
  list: branchItem[];
  selectedContent: string;
}

export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: () => [],
    },
    selectedContent: {
      type: String,
      default: '',
    },
  },
  emits: ['input-click'],
  setup(props: Props, { emit }) {
    const disabled = ref<boolean>(false);
    const selectedItem = ref<string>('');
    const listItemClick = (branch: branchItem): void => {
      if (disabled.value || props.selectedContent) {
        return;
      }
      emit('input-click', branch);
      disabled.value = true;
      selectedItem.value = branch.content;
    };
    return {
      props,
      listItemClick,
      disabled,
      selectedItem,
    };
  },
};
</script>
<style lang="scss">
.form-branch-container {
  .form-card-title {
    margin-bottom: 8px;
  }

  .ivr-form-branch-item {
    cursor: pointer;
    color: #1C66E5;
    background-color: #fff;
    border: 1px solid rgba(0, 110, 255, 0.3);
    padding: 12px;
    border-radius: 20px;
    margin-top: 8px;
    line-height: 16px;
    width: -moz-fit-content;
    min-width: 50px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .item-disabled {
    cursor: default !important;
    opacity: 0.6;
    color: #94BFFF;
    background-color: #F5F9FF;
    border: 1px solid rgba(0, 110, 255, 0.15);
  }
  .item-selected {
    background-color: rgba(54, 141, 255, 0.15) !important;
    position: relative;
    cursor: default !important;
  }
}
</style>
